Fixed "Title jumps to the next line, out of the toolbar #508" #509

touficbatache · 2017-04-12T19:25:04Z

Hey,
I tried to fix the toolbar problem with adding a flex: 0; style to the .mdc-toolbar__section--align-end class as mentioned in the issue #508.

EDIT

I added a class mdc-toolbar__section--shrink-to-fit that fixes the problem as well as some essential css code. Thanks to @yeelan0319.

googlebot · 2017-04-12T19:25:06Z

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
If you signed the CLA as a corporation, please let us know the company's name.

touficbatache · 2017-04-12T19:28:28Z

I signed it!

googlebot · 2017-04-12T19:28:29Z

CLAs look good, thanks!

codecov-io · 2017-04-12T19:34:26Z

Codecov Report

Merging #509 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #509   +/-   ##
=======================================
  Coverage   99.02%   99.02%           
=======================================
  Files          45       45           
  Lines        2050     2050           
  Branches      251      251           
=======================================
  Hits         2030     2030           
  Misses         20       20

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ea8f862...b022af6. Read the comment docs.

yeelan0319 · 2017-04-13T16:06:04Z

Hey @touficbatache ,

mdc-toolbar__section--* set flex:1 because mdc-toolbar is trying to fit the generic needs and we don't want to impose what users put in each sections, so they by default have equally divided width.

I suggested the solution we would like to have for this problem as comment. If you could modify your PR and we would willing to help you merge it. Thanks for filing the PR to solve the issue.

yeelan0319 · 2017-04-13T16:09:50Z

packages/mdc-toolbar/mdc-toolbar.scss

@@ -68,6 +68,7 @@ $mdc-toolbar-mobile-breakpoint: 599px;
    &--align-end {


Instead of modifying --align-end directly, we would like to have a mdc-toolbar--section-shrink-to-fit modifier that set flex: none.

In your specific use case, you can do something like:

<section class="mdc-toolbar__section mdc-toolbar__section--align-start"> <span class="mdc-toolbar__title">This is a very long title</span> </section> <section class="mdc-toolbar__section mdc-toolbar__section--align-end mdc-toolbar--section-shrink-to-fit"> ... </section>

yeelan0319 · 2017-04-13T16:24:09Z

packages/mdc-toolbar/mdc-toolbar.scss

@@ -68,6 +68,7 @@ $mdc-toolbar-mobile-breakpoint: 599px;
    &--align-end {
      justify-content: flex-end;
      order: 1;
+      flex: 0;
    }
  }


In order to accommodate a super long title, we also need to add:

.mdc-toolbar__section { overflow: hidden; } .mdc-toolbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

Here is a pen for demonstrating the case.

touficbatache · 2017-04-13T17:54:49Z

@yeelan0319 I made the necessary changes but the problem is that TravisCI is failing.

yeelan0319 · 2017-04-13T20:13:45Z

@touficbatache It seems like this what TravisCI is complaining happened in mdc-toolbar.scss:

77:5 ✖ Expected empty line before declaration declaration-empty-line-before

touficbatache · 2017-04-13T20:14:43Z

Do you know what is causing that?

yeelan0319 · 2017-04-13T20:18:58Z

&__title {
    @include mdc-typography(title);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    line-height: 1.5rem;
  }

You need a empty line between @include mdc-typography(title); and overflow: hidden;

touficbatache · 2017-04-13T20:19:49Z

Oh. A simple problem... I'll fix that... Thankss

yeelan0319 · 2017-04-13T20:21:23Z

Yep! Exactly what TravisCI complained about in its log :)

yeelan0319 · 2017-04-13T20:22:38Z

Looks good. I will merge it once check passed.

touficbatache · 2017-04-13T20:23:14Z

Ok thank you. :)

yeelan0319 · 2017-04-13T20:47:25Z

Since we are adding a new modifier class, we should also documented the behavior in following places:

Under "Sections", where we described

Toolbar sections are laid out using flexbox. Each section will take up an equal
amount of space within the toolbar.

I think we could change it to something like

Toolbar sections are laid out using flexbox. Each section will take up an equal
amount of space within the toolbar by default. But you can accommodate very long section by adding mdc-toolbar__section-shrink-to-fit to the rest of the section.

It should help if we add a paragraph of sample code there.

Under "Modifier", where we documented all the modifiers, add mdc-toolbar__section-shrink-to-fit to it.

I think that should be it! Thanks @touficbatache for your help!

…508"

touficbatache · 2017-04-14T06:03:27Z

No problem. Happy to help :) Yes, this should be the last commit. Thanks

yeelan0319 · 2017-04-14T15:18:56Z

packages/mdc-toolbar/README.md

@@ -139,3 +139,4 @@ The provided modifiers are:
 | `mdc-toolbar--fixed`                 | Make toolbar fixed to top of screen.    |
 | `mdc-toolbar__section--align-start`  | Makes section aligns to the start.      |
 | `mdc-toolbar__section--align-end`    | Makes section aligns to the end.        |
+| `mdc-toolbar__section--shrink-to-fit`| Makes section take more space.          |


Since we are setting flex: none, it is actually the opposite.

Makes section takes the width of its content.

yeelan0319 · 2017-04-14T15:25:02Z

packages/mdc-toolbar/README.md

@@ -96,7 +96,7 @@ of the toolbar (respectively).
 ```

 Toolbar sections are laid out using flexbox. Each section will take up an equal
-amount of space within the toolbar.
+amount of space within the toolbar by default. But you can accommodate very long section (very long title) by adding `mdc-toolbar__section--shrink-to-fit` to the rest of the section


the rest of the section >> other sections.

Could you also add the following sample code

<div class="mdc-toolbar> <div class="mdc-toolbar__row"> <section class="mdc-toolbar__section mdc-toolbar__section--align-start"> <span class="mdc-toolbar__title">This is a super super super super long title</span> </section> <section class="mdc-toolbar__section mdc-toolbar__section--align-end mdc-toolbar__section--shrink-to-fit"> <a class="material-icons search align-icons" aria-label="Search" alt="Search">search</a> </section> </div> </div>

…#508"

…508"

Fixed "Title jumps to the next line, out of the toolbar #508"

e735ddc

touficbatache mentioned this pull request Apr 12, 2017

Title jumps to the next line, out of the toolbar #508

Closed

yeelan0319 suggested changes Apr 13, 2017

View reviewed changes

touficbatache added 4 commits April 13, 2017 20:29

Merge branch 'master' into master

1cfbf4b

Fixed "Title jumps to the next line, out of the toolbar #508"

5f36437

Fixed "Title jumps to the next line, out of the toolbar #508"

1622099

Fixed "Title jumps to the next line, out of the toolbar #508"

d5f810e

Update mdc-toolbar.scss

ae440d0

Update mdc-toolbar.scss

f63dfd3

Update mdc-toolbar.scss

7047240

Final update: Fixed "Title jumps to the next line, out of the toolbar #…

e6359c5

…508"

yeelan0319 suggested changes Apr 14, 2017

View reviewed changes

touficbatache added 2 commits April 14, 2017 18:32

Final changes: Fixed "Title jumps to the next line, out of the toolbar …

5966ceb

…#508"

Final change: Fixed "Title jumps to the next line, out of the toolbar #…

b022af6

…508"

yeelan0319 merged commit 130246f into material-components:master Apr 14, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed "Title jumps to the next line, out of the toolbar #508" #509

Fixed "Title jumps to the next line, out of the toolbar #508" #509

touficbatache commented Apr 12, 2017 •

edited

Loading

googlebot commented Apr 12, 2017

touficbatache commented Apr 12, 2017

googlebot commented Apr 12, 2017

codecov-io commented Apr 12, 2017 •

edited

Loading

yeelan0319 commented Apr 13, 2017

yeelan0319 Apr 13, 2017 •

edited

Loading

yeelan0319 Apr 13, 2017

touficbatache commented Apr 13, 2017

yeelan0319 commented Apr 13, 2017

touficbatache commented Apr 13, 2017 via email •

edited

Loading

yeelan0319 commented Apr 13, 2017

touficbatache commented Apr 13, 2017 via email •

edited

Loading

yeelan0319 commented Apr 13, 2017

yeelan0319 commented Apr 13, 2017

touficbatache commented Apr 13, 2017 via email •

edited

Loading

yeelan0319 commented Apr 13, 2017

touficbatache commented Apr 14, 2017

yeelan0319 Apr 14, 2017

yeelan0319 Apr 14, 2017

		@@ -68,6 +68,7 @@ $mdc-toolbar-mobile-breakpoint: 599px;
		&--align-end {

Fixed "Title jumps to the next line, out of the toolbar #508" #509

Fixed "Title jumps to the next line, out of the toolbar #508" #509

Conversation

touficbatache commented Apr 12, 2017 • edited Loading

EDIT

googlebot commented Apr 12, 2017

touficbatache commented Apr 12, 2017

googlebot commented Apr 12, 2017

codecov-io commented Apr 12, 2017 • edited Loading

Codecov Report

yeelan0319 commented Apr 13, 2017

yeelan0319 Apr 13, 2017 • edited Loading

Choose a reason for hiding this comment

yeelan0319 Apr 13, 2017

Choose a reason for hiding this comment

touficbatache commented Apr 13, 2017

yeelan0319 commented Apr 13, 2017

touficbatache commented Apr 13, 2017 via email • edited Loading

yeelan0319 commented Apr 13, 2017

touficbatache commented Apr 13, 2017 via email • edited Loading

yeelan0319 commented Apr 13, 2017

yeelan0319 commented Apr 13, 2017

touficbatache commented Apr 13, 2017 via email • edited Loading

yeelan0319 commented Apr 13, 2017

touficbatache commented Apr 14, 2017

yeelan0319 Apr 14, 2017

Choose a reason for hiding this comment

yeelan0319 Apr 14, 2017

Choose a reason for hiding this comment

touficbatache commented Apr 12, 2017 •

edited

Loading

codecov-io commented Apr 12, 2017 •

edited

Loading

yeelan0319 Apr 13, 2017 •

edited

Loading

touficbatache commented Apr 13, 2017 via email •

edited

Loading

touficbatache commented Apr 13, 2017 via email •

edited

Loading

touficbatache commented Apr 13, 2017 via email •

edited

Loading